<script setup lang="ts">
import { computed, h } from "vue";
import BySticky from "./BySticky.vue";
import ByEmpty from "./ByEmpty.vue";
import useLogin from "@/hooks/useLogin";

const props = defineProps<{
  footerFixed?: boolean;
  footerSafe?: boolean;

  // 内容居中
  bodyCenter?: boolean;

  checkLogin?: boolean;
}>();

const FooterNode = computed(() => {
  const flag = props.footerFixed;
  return flag ? h(BySticky, { position: "bottom" }) : h("view");
});

const { isLogged } = useLogin();
</script>

<template>
  <view class="flex flex-col min-h-screen">
    <BySticky class="flex-none"><slot name="header" /></BySticky>

    <view :class="['flex-auto', { 'flex-center': bodyCenter }]">
      <slot name="login" v-if="checkLogin && !isLogged">
        <ByEmpty title="请先登录" to="/pages/login/index" />
      </slot>

      <slot v-else />
    </view>

    <FooterNode :class="['flex-none', footerSafe && 'safe-footer']">
      <slot name="footer" />
    </FooterNode>
  </view>
</template>
